<script setup lang='ts'>
import Steps from './steps/index.vue'
import IdleTime from './components/IdleTime.vue'
import RollBack from './components/RollBack.vue'
import SignContract from './components/SignContract.vue'
import TestSP from './components/TestSP.vue'
import OutBuyAsk from '@/views/process/components/OutBuyAsk.vue'
import OutBuy from '@/views/process/components/OutBuy.vue'
import BusinessTP from '@/views/process/components/BusinessTP.vue'
import BusinessSP from '@/views/process/components/BusinessSP.vue'
import ProcessAndFiles from '@/views/process/components/ProcessAndFiles.vue'

const outbuyAskVisible = ref(false)
const businessVisible = ref(false)
const contractVisible = ref(false)
const tpVisible = ref(false)
const drawerVisible = ref(false)
const idleTimeVisible = ref(false)
const bohuiVisible = ref(false)
const outbuyVisible = ref(false)
const testSPVisible = ref(false)
</script>

<template>
  <div>
    <div mb-4 flex gap-3>
      <el-card shadow="always" :body-style="{ padding: '10px' }" flex-1>
        <template #header>
          <div flex-between-center>
            <span text-lg font-semibold>罗可 Fusionwan 测试流程</span>
            <div>
              <el-button type="primary">
                信息导出
              </el-button>
              <el-button type="primary" @click="drawerVisible = true">
                进度与附件
              </el-button>
            </div>
          </div>
        </template>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="流程分类">
            测试流程
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag type="warning" round>
              进行中
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="商标名称">
            理想
          </el-descriptions-item>
          <el-descriptions-item label="客户主体名称">
            罗可-华东
          </el-descriptions-item>
          <el-descriptions-item label="发起人">
            张三
          </el-descriptions-item>
          <el-descriptions-item label="客户业务对接人">
            李想 1991345678
          </el-descriptions-item>
          <el-descriptions-item label="发起时间">
            2024-7-8 12:06:45
          </el-descriptions-item>
          <el-descriptions-item label="持续时间">
            2 天 10 小时 34 分
          </el-descriptions-item>
        </el-descriptions>
        <h2 mb1 mt4 text-lg>
          <span font-semibold>利润分析</span>
          <span ml1 text-xs text-gray-500>(销售成本=询价成本+网内成本、毛利润=精准报价-外采成本、净利润=毛利润-网内成本、毛利率=毛利润/精准报价*100%、净利率=净利润/精准报价*100%)</span>
        </h2>
        <el-descriptions :column="3" border>
          <el-descriptions-item label=" 网内成本">
            1000
          </el-descriptions-item>
          <el-descriptions-item label="询价成本">
            2000
          </el-descriptions-item>
          <el-descriptions-item label="销售成本">
            2000
          </el-descriptions-item>
          <el-descriptions-item label="外采成本">
            1000
          </el-descriptions-item>
          <el-descriptions-item label="精准报价">
            1000
          </el-descriptions-item>
          <el-descriptions-item label="净利润">
            1000
          </el-descriptions-item>
          <el-descriptions-item label="净利率">
            10%
          </el-descriptions-item>
          <el-descriptions-item label="毛利润">
            10%
          </el-descriptions-item>
          <el-descriptions-item label="毛利率">
            10%
          </el-descriptions-item>
        </el-descriptions>
        <div mt-5>
          <el-popconfirm title="是否确认销售需求【售前角色才有】?">
            <template #reference>
              <el-button type="primary" ml-4>
                确认
              </el-button>
            </template>
          </el-popconfirm>
          <el-button type="success">
            确认验收
          </el-button>
          <el-button type="success">
            完成交付
            <!-- （下列表单已填写完毕后） -->
          </el-button>
          <el-button type="success">
            交付测试
            <!-- （下列表单已填写完毕后） -->
          </el-button>
          <el-button type="warning" @click="bohuiVisible = true">
            驳回
          </el-button>
          <el-button type="warning" @click="idleTimeVisible = true">
            挂起
          </el-button>

          <el-button type="danger">
            关闭
          </el-button>
          <el-button type="primary" ml-4 @click="outbuyAskVisible = true">
            外采询价(售前)
          </el-button>
          <el-button type="primary" ml-4 @click="outbuyVisible = true">
            外采(交付)
          </el-button>
          <el-button type="primary" ml-4 @click="tpVisible = true">
            价格审批(内审-销售)
          </el-button>
          <el-button type="primary" ml-4 @click="businessVisible = true">
            业务审批（内审-销售）
          </el-button>
          <el-button type="primary" ml-4 @click="testSPVisible = true">
            测试审批
          </el-button>
          <el-button type="primary" ml-4 @click="contractVisible = true">
            合同流程 （内审-销售主管审核后）
          </el-button>
        </div>
      </el-card>
    </div>
    <div flex gap-3>
      <Steps />
    </div>
    <IdleTime v-model="idleTimeVisible" />
    <RollBack v-model="bohuiVisible" />
    <OutBuyAsk v-model="outbuyAskVisible" />
    <OutBuy v-model="outbuyVisible" />
    <ProcessAndFiles v-model="drawerVisible" />
    <BusinessTP v-model="tpVisible" />
    <BusinessSP v-model="businessVisible" />
    <SignContract v-model="contractVisible" />
    <TestSP v-model="testSPVisible" />
  </div>
</template>

<style scoped lang='scss'></style>
